<template>
    <div>
        <van-dropdown-menu>
            <!-- v-model="value1"  勾选哪一个  :options 有哪些选项 -->
        <van-dropdown-item  disabled  title="综合"/>
        <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="chanPrice"/>
        <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="chanCategory"/>
        </van-dropdown-menu>
        
        <!-- 如果没有商品,就不展示组件 -->
        <van-empty v-if="goodsList.length==0" description="没有此类商品QAQ" />
        <products v-else :goodsList="goodsList"/>
    </div>
</template>

<script>
import products from "../products"
export default {
    
    props:["goodsList","filterCategory"],
    // 需求:正确的勾上分类中的某一项,要把value2写活,值必须是filterCategory中checked为true的一项
    beforeUpdate(){
        // 遍历filterCategory,把checked为true的一项值到给value2
        this.filterCategory.map(item=>{
            if(item.checked){
                this.value2=item.value
            }
        })
    },
    data () {
        return {
            value1: 'desc',
            value2: 0,
            option1: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格由低到高', value: 'asc' },
            ],
            // option2: [
            //     { text: '全部', value: 'a' },
            //     { text: '居家', value: 'b' },
            // ],
        }
    },
    components:{
        products
    },
    methods:{
        chanCategory(value){
            this.$emit("chanCategory",value)    //value就是分类栏的id
        },
        chanPrice(value){
            this.$emit("chanPrice",value)
        }
    }
}
</script>
 
<style lang = "less" scoped>
 ul{
     background-color: #fff;
 }
</style>